<template>
    <div>
      <div class="header">
        <div class="h-left">
          <img @click="bac()" :src="'./static/lyl/back.png'" alt="">
          <span>更多资讯</span>
        </div>
        <div class="h-right">
          <img :src="'./static/lyl/search.png'" alt="">
          <img :src="'./static/lyl/san.png'" alt="">
        </div>
      </div>
      <ul class="ulone">
        <li @click="deta(item)" v-for="(item,index) in datatx" :key="index">
          <div class="li-left">
            <p>{{item.post_title}}</p>
            <div class="li-footer">
              <span>{{item.user_login}}</span>
              <span>{{item.post_date}}</span>
            </div>
          </div>
          <img :src="item.smeta" alt="">
        </li>
      </ul>
    </div>
</template>

<script>
  import * as home from "../../../api/home.js";
    export default {
      name: "Morenews",
      data(){
        return {
          datatx:[]
        }
      },
      beforeMount(){
        home.postsList().then(res=>{
          this.datatx = res.data;
        })
      },
      mounted(){
        mui.back = function() {
          window.history.go(-1);
        }
      },
      methods:{
        bac(){
          history.go(-1)
        },
        deta(item){
          this.$router.push({path:'/detail/'+item.id});
        }
      }
    }
</script>

<style scoped>
  .header{
    border-bottom: 1px solid #dcdcdc;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
  }
  .header .h-left img{
    width: 22px;
    vertical-align: bottom;
    margin-right: 30px;
  }
  .header .h-left span{
    font-size: 36px;
  }
  .header .h-right img:nth-child(1){
    width: 42px;
    margin-right: 64px;
  }
  .header .h-right img:nth-child(2){
    width: 56px;
    vertical-align: 50%;
  }
  .ulone li{
    display: flex;
    justify-content: space-between;
    padding: 30px 40px;
    border-bottom: 1px solid #dcdcdc;
  }
  .ulone li .li-left{
    width: 390px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

  }
  .ulone li .li-left p{
    font-size: 28px;
    line-height: 44px;
  }
  .ulone li .li-left .li-footer span:nth-child(1){
    font-size: 24px;
    color: #558ef7;
  }
  .ulone li .li-left .li-footer span:nth-child(2){
    font-size: 22px;
    color: #8c8c8c;
    margin-left: 20px;
  }
  .ulone li img{
    width: 240px;
    height: 150px;
    border-radius: 10px;
  }
</style>
